import React from 'react';
import ReactDOM from 'react-dom';
import { Link, Switch, Route, HashRouter as Router } from 'react-router-dom'
import { Menu, Icon } from 'antd';
import 'antd/dist/antd.css';
import '../../static/tero/tero.less';
import Nav from './tero_nav.jsx';
import Circle from './circle_of_friend.jsx';
import Circle2 from './circle_of_friend2.jsx';
import Public from './public_number.jsx';
import PublicTwo from './public_number_two.jsx';
import Postbar from './postbar.jsx';
import Journa from './journalism.jsx';
import Tibetan from './tibetan.jsx';
import Facebook from './facebook.jsx'
import Instagram from './instragram.jsx'
import Tapp from './app_nav.jsx'
import Index from './index.jsx'
import $ from 'jquery'
// import Betan from './betan.jsx'
import Betan from './post_bar.jsx';
import AppTable from './app_table.jsx'
import RoundBar from './round_bar.jsx'
import SearchEngines from './search_engines.jsx'
// import Social from './social_networks.jsx'
import Whole from './whole.jsx'
import Mmap from './map.jsx'
import Other from './other.jsx'
import Twitter from './twitter.jsx'
import Social from './blogs'
import Skype from './skype.jsx'
import Line from './line.jsx'
import Whatsapp from './Whatsapp.jsx'
import Viber from './viber.jsx'
import hot from './hot.jsx'

import u from '../../common.js'





const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class Tero extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
        }
    }
    componentWillMount() {
    }
    handleClick = (e) => {

    }
    componentDidMount() {
        // $('.tero_left').find('a').click(function(){
        //     sessionStorage.setItem('loading','block')
        // })
    }

    setKey(key) {
        sessionStorage.setItem('keyword', key)

    }
    goRouter(d) {
        this.props.history.push(d)

    }
    render() {
        return (
            <Router>
                <div className='tero'>

                    <div className='tero_left'>
                        <Menu
                            onClick={this.handleClick}
                            style={{ width: 256 }}
                            defaultSelectedKeys={[sessionStorage.getItem('keyword') || '5']}
                            defaultOpenKeys={[sessionStorage.getItem('keysub'), 'sub2']}
                            mode="inline"
                        >
                            <SubMenu key="sub1" title={<span><span>境外</span></span>}>
                                <SubMenu key="sub4" className='temo' title="社交网络">
                                    <Menu.Item key="1"><Link to='/tero/facebook' onClick={() => {
                                        this.setKey('1')
                                    }}>Facebook</Link></Menu.Item>
                                    <Menu.Item key="2"><Link to='/tero/twitter'>Twitter</Link></Menu.Item>
                                    <Menu.Item key="3"><Link to='/tero/instagram'
                                        onClick={() => {
                                            this.setKey('3')
                                        }}
                                    >instagram</Link></Menu.Item>
                                    {/* <Menu.Item key="17"><Link to='/tero/skype'
                                        onClick={() => {
                                            this.setKey('17')
                                        }}
                                    >skype</Link></Menu.Item>
                                    <Menu.Item key="18"><Link to='/tero/line'
                                        onClick={() => {
                                            this.setKey('18')
                                        }}
                                    >line</Link></Menu.Item>
                                    <Menu.Item key="19"><Link to='/tero/whatsapp'
                                        onClick={() => {
                                            this.setKey('19')
                                        }}
                                    >whatsapp</Link></Menu.Item>
                                    <Menu.Item key="20"><Link to='/tero/viber'
                                        onClick={() => {
                                            this.setKey('20')
                                        }}
                                    >viber</Link></Menu.Item> */}
                                </SubMenu>
                                <Menu.Item key="4" ><Link to='/tero/other'>其他网站</Link></Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub2" title={<span><span>境内</span></span>}>
                                <Menu.Item key="5"
                                    onClick={() => {
                                        this.setKey('5')
                                    }}
                                ><Link to='/tero/whole'>全部</Link></Menu.Item>
                                <SubMenu key="sub3" className='temo' title="即时通讯">
                                    <Menu.Item key="6"><Link to='/tero/c'
                                        onClick={() => {
                                            this.setKey('6')
                                        }}
                                    >公众号</Link></Menu.Item>
                                    <Menu.Item key="7"><Link to='/tero/l'
                                        onClick={() => {
                                            this.setKey('7')
                                        }}
                                    >朋友圈</Link></Menu.Item>
                                    <Menu.Item key="8"
                                        onClick={() => {
                                            this.setKey('8')
                                        }}
                                    ><Link to='/tero/a'>微信群</Link></Menu.Item>
                                    <Menu.Item key="9"><Link to='/tero/m'
                                        onClick={() => {
                                            this.setKey('9')
                                        }}
                                    >附近的人</Link></Menu.Item>
                                </SubMenu>
                                <Menu.Item key="11"
                                ><Link to='/tero/roundBar'
                                    onClick={() => {
                                        this.setKey('11')
                                    }}
                                >新闻</Link></Menu.Item>
                                <Menu.Item key="12"
                                    onClick={() => {
                                        this.setKey('12')
                                    }}
                                ><Link to='/tero/journalism'>论坛</Link></Menu.Item>
                                <Menu.Item key="13"><Link to='/tero/searchEngines' onClick={() => {
                                    this.setKey('13')
                                }}>平台媒体</Link></Menu.Item>
                                <Menu.Item key="14"><Link to='/tero/social' onClick={() => {
                                    this.setKey('14')
                                }}>博客</Link></Menu.Item>
                                <Menu.Item key="15"><Link to='/tero/h' onClick={() => {
                                    this.setKey('15')
                                }}>贴吧</Link></Menu.Item>
                                <Menu.Item key="16"><Link to='/tero/appTable' onClick={() => {
                                    this.setKey('16')
                                }}>外文网站</Link></Menu.Item>
                                 <Menu.Item key="21"><Link to='/tero/hot' onClick={() => {
                                    this.setKey('21')
                                }}>热点</Link></Menu.Item>
                            </SubMenu>
                        </Menu>
                    </div>
                    <div className='right'>
                        <Switch>
                            <Route path='/tero/a' component={Nav}> </Route>
                            <Route path='/tero/c' component={Public}> </Route>
                            <Route path='/tero/e' component={Postbar}> </Route>
                            <Route path='/tero/d' component={PublicTwo}> </Route>
                            <Route path='/tero/journa' component={Journa}> </Route>
                            <Route path='/tero/g' component={Postbar}> </Route>
                            <Route path='/tero/h' component={Betan}> </Route>
                            <Route path='/tero/l' component={Circle}> </Route>
                            <Route path='/tero/l2' component={Circle2}> </Route>
                            <Route path='/tero/journalism' component={Tapp}> </Route>
                            <Route path='/tero/appTable' component={AppTable}> </Route>
                            <Route path='/tero/social' component={Social}> </Route>
                            <Route path='/tero/searchEngines' component={SearchEngines}> </Route>
                            <Route path='/tero/roundBar' component={RoundBar}> </Route>
                            <Route path='/tero/whole' component={Whole}> </Route>
                            <Route path='/tero/other' component={Other}> </Route>
                            <Route path='/tero/instagram' component={Instagram}> </Route>
                            <Route path='/tero/facebook' component={Facebook}> </Route>
                            <Route path='/tero/twitter' component={Twitter}> </Route>
                            <Route path='/tero/m' component={Mmap}></Route>
                            <Route path='/tero/skype' component={Skype}></Route>
                            <Route path='/tero/line' component={Line}></Route>
                            <Route path='/tero/whatsapp' component={Whatsapp}></Route>
                            <Route path='/tero/viber' component={Viber}></Route>
                            <Route path='/tero/hot' component={hot}></Route>
                        </Switch>
                    </div>
                </div>
            </Router>
        );
    }
}

export default Tero

